<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录 - 局域网通讯系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="icon" type="image/png" href="../static/Image/logo.png">
    <style>
    /* 动态渐变背景 */
    body, .login-bg {
        min-height: 100vh;
        background: linear-gradient(-45deg, #e0e7ff, #f1f5f9, #c7d2fe, #f0fdfa);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }
    @keyframes gradientBG {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
    }
    </style>
</head>
<body>
<canvas id="bg-canvas" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;"></canvas>
    <div class="login-bg">
        <div class="container d-flex justify-content-center align-items-center min-vh-100">
            <div class="login-card shadow-lg p-4 rounded-4 bg-white">
                <div class="text-center mb-4">
                    <img src="/Image/logo.png" alt="Logo" class="mb-2" style="height:48px;">
                    <h2 class="fw-bold mb-1">局域网通讯系统</h2>
                    <div class="text-secondary small">LAN Communication System</div>
                </div>
                <div th:if="${msg}" class="alert alert-info" th:text="${msg}"></div>
                <div th:if="${errorMsg}" class="alert alert-danger py-2 mb-3" th:text="${errorMsg}"></div>
                <form action="/loginvalidate" method="post" autocomplete="off">
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-user"></i></span>
                        <input type="text" name="username" id="inputEmail" class="form-control ps-5" placeholder="用户名" required autofocus th:value="${rememberedUsername}">
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-lock"></i></span>
                        <input type="password" name="password" id="inputPassword" class="form-control ps-5" placeholder="密码" required>
                        <span class="toggle-password" style="position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;"><i class="fa fa-eye-slash"></i></span>
                    </div>
                    <div class="mb-3 form-check d-flex align-items-center">
                        <input type="checkbox" class="form-check-input me-2" id="rememberMe" name="rememberMe" th:checked="${rememberedUsername} != null">
                        <label class="form-check-label small text-secondary" for="rememberMe">记住我</label>
                    </div>
                    <button class="btn btn-primary w-100 py-2 fw-bold" type="submit">登录</button>
                    <div class="login-links text-center mt-3">
                        <a href="/register" class="me-3">注册账号</a>
                        <a href="/forget" class="me-3">忘记密码？</a>
                    </div>
                    <div class="text-center mt-2">
                        <a href="/admin/login" class="btn btn-outline-primary w-75 fw-bold">管理员登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 悬浮操作手册按钮 -->
    <button id="manualBtn" class="btn btn-info shadow" style="position:fixed;right:32px;top:32px;z-index:1000;border-radius:50px;padding:12px 28px;font-size:16px;">操作手册</button>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <script>
      $(function() {
        $('form').on('submit', function(e) {
          var username = $('#inputEmail').val().trim();
          var password = $('#inputPassword').val().trim();
          if (!username) {
            $('.alert-danger').remove();
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">用户名不能为空</div>');
            $('#inputEmail').focus();
            e.preventDefault();
            return false;
          }
          if (!password) {
            $('.alert-danger').remove();
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">密码不能为空</div>');
            $('#inputPassword').focus();
            e.preventDefault();
            return false;
          }
        });
      });

      // 密码可见切换
      $(document).on('click', '.toggle-password', function() {
        var input = $(this).siblings('input');
        var icon = $(this).find('i');
        if (input.attr('type') === 'password') {
          input.attr('type', 'text');
          icon.removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
          input.attr('type', 'password');
          icon.removeClass('fa-eye').addClass('fa-eye-slash');
        }
      });

      // Canvas 动态背景动画（彩色粒子漂浮）
      (function() {
        var canvas = document.getElementById('bg-canvas');
        if (!canvas) return;
        var ctx = canvas.getContext('2d');
        var w = window.innerWidth, h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
        var particles = [];
        var colors = ['#a5b4fc','#f0fdfa','#c7d2fe','#f1f5f9','#e0e7ff'];
        for (var i = 0; i < 60; i++) {
          particles.push({
            x: Math.random() * w,
            y: Math.random() * h,
            r: 16 + Math.random() * 16,
            dx: (Math.random() - 0.5) * 0.7,
            dy: (Math.random() - 0.5) * 0.7,
            color: colors[Math.floor(Math.random()*colors.length)],
            alpha: 0.2 + Math.random() * 0.3
          });
        }
        function draw() {
          ctx.clearRect(0,0,w,h);
          for (var i = 0; i < particles.length; i++) {
            var p = particles[i];
            ctx.globalAlpha = p.alpha;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI);
            ctx.fillStyle = p.color;
            ctx.fill();
            p.x += p.dx;
            p.y += p.dy;
            if (p.x < -p.r) p.x = w + p.r;
            if (p.x > w + p.r) p.x = -p.r;
            if (p.y < -p.r) p.y = h + p.r;
            if (p.y > h + p.r) p.y = -p.r;
          }
          ctx.globalAlpha = 1;
          requestAnimationFrame(draw);
        }
        draw();
        window.addEventListener('resize', function() {
          w = window.innerWidth;
          h = window.innerHeight;
          canvas.width = w;
          canvas.height = h;
        });
      })();

      // 操作手册弹窗
      $(function(){
        $('#manualBtn').click(function(){
          var manual = `
            <div style='text-align:left;line-height:1.8;'>
              <h5>操作手册</h5>
              <ul>
                <li>1. 登录后可进入聊天室，与在线用户实时交流。</li>
                <li>2. 左侧可查看当前在线用户列表，点击用户名可私聊。</li>
                <li>3. 可在"群发系统广播"输入框发送全员消息。</li>
                <li>4. 管理员可在后台管理用户、强制下线、发布通知等。</li>
                <li>5. 如遇账号问题请联系管理员。</li>
              </ul>
            </div>
          `;
          var modal = $(
            `<div class='modal fade' tabindex='-1' role='dialog'>
              <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                  <div class='modal-header'>
                    <h5 class='modal-title'>操作手册</h5>

                  </div>
                  <div class='modal-body'>${manual}</div>
                </div>
              </div>
            </div>`
          );
          $('body').append(modal);
          modal.modal('show');
          modal.on('hidden.bs.modal', function(){ modal.remove(); });
        });
      });
    </script>
</body>
</html>
